<template>
	<view class="content">

		<div class="content-header" @click="addShow()">
			<text>第{{firstPage}}-{{lastPage}}章</text>
		</div>
		<div class="content-txt" v-if="isShow" @click="addShow()">
			<div class="txt">
				<ul>
					<li v-for="(item,i) in firstArr" @click="addBtn(i,item)" :class="index==i?'active':''">
						<text>{{firstArr[i]}}-{{lastArr[i]}}</text>
					</li>
				</ul>
			</div>
		</div>
		<div class="content-banner">
			<ul>
				<li v-for="(item,i) in contentList" @click="getConId(item,i)">
					<text>{{item.title}}</text>
				</li>
			</ul>
		</div>
		<view class="wrap">
			<u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"
				:customStyle="{backgroundColor:'#fe8761'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import {
		getDeatil
	} from '@/api/index.js';
	export default {
		data() {
			return {
				contentList: [],
				contentArr: [],
				firstArr: [],
				lastArr: [],
				index: 0,
				isShow: false,
				num: {},
				firstPage: 0 | 1,
				lastPage: 0 | 100,
				contentPage: [],
				source_uuid: '',
				scrollTop: 0,
				mode: 'circle',
				iconStyle: {
					fontSize: '32rpx',
					color: '#fff',
				},
				author: '',
				category: '',
				description: '',
				img: '',
				title: ''
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data);
			let {
				catalog,
				id,
				author,
				category,
				description,
				img,
				title
			} = data
			console.log(data);
			this.author = author;
			this.category = category;
			this.description = description;
			this.img = img;
			this.title = title;
			this.contentPage = catalog;
			this.source_uuid = id;
			this.contentList = catalog.slice(0, 99);
			// console.log(this.contentList);
			let num = Math.ceil(catalog.length / 100)
			console.log(num);
			this.contentArr = this.spArr(catalog, 100);

			for (let k = 0; k < this.contentArr.length; k++) {
				// 第一种算法
				let first;
				if (this.contentArr[k].slice(0, 1)[0].title.indexOf("章") != -1) {
					first = this.contentArr[k].slice(0, 1)[0].title.match(/第(\S*)章/)

				} else {
					first = this.contentArr[k].slice(0, 1)[0].title.match(/(\S*)/)
				}
				let last = this.contentArr[k].slice(-1)[0].title.match(/第(\S*)章/);

				// 第二种算法
				let aa;
				let bb;
				if (k == 0) {
					aa = 1;
					bb = this.contentArr[k].length
				} else {
					aa = 100 * k + 1;
					bb = aa + this.contentArr[k].length - 1;
				}
				// console.log('a', aa);
				// console.log('b', bb);
				this.firstArr.push(aa)
				this.lastArr.push(bb)
				this.num.first = this.firstArr;
				this.num.last = this.lastArr
			}
			console.log(this.num);
		},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
				// console.log(e);
			},
			spArr(arr, num) {
				let newArr = [];
				for (let i = 0; i < arr.length;) {
					newArr.push(arr.slice(i, i += num))
				}
				return newArr
				// this.contentArr = newArr;
			},
			addBtn(i, item) {
				this.index = i;
				this.firstPage = this.num.first[i];
				this.lastPage = this.num.last[i];
				this.contentList = this.contentPage.slice(this.firstPage, this.lastPage);
			},
			addShow() {
				this.isShow = !this.isShow
			},
			getConId(item, i) {
				let data = {
					source_uuid: this.source_uuid,
					uuid: item.uuid,
					arr: this.contentList,
					key: i,
					author: this.author,
					category: this.category,
					description: this.description,
					img: this.img,
					title: this.title
				}
				uni.navigateTo({
					url: '../novel/novel?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			}
		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		position: relative;



		.content-header {
			position: fixed;
			top: 80rpx;
			left: 0;
			width: 100%;
			height: 80rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 14px;
			color: #998D80;
			background-color: #fff;
			z-index: 100;

		}

		.wrap {
			height: 200vh;
		}

		.content-txt {
			position: absolute;
			top: 80rpx;
			left: 0;
			width: 100%;
			height: 10000rpx;
			background-color: rgba(0, 0, 0, 0.5);

			// opacity: .8;
			.txt {
				position: fixed;
				top: 160rpx;
				left: 0;
				width: 100%;
				// height: 240rpx;
				padding: 10rpx 0 40rpx;
				background-color: #fceccc;

				ul {
					display: flex;
					// justify-content: space-evenly;
					flex-wrap: wrap;
					padding: 0;
					list-style: none;
					width: 100%;
					height: 200rpx;
					overflow-y: scroll;

					li {
						// flex: 33%;
						width: 190rpx;
						height: 60rpx;
						margin: 28rpx 28rpx 10rpx;
						border: 1px solid #fe865d;
						// background-color: #fe865d;
						border-radius: 20px;
						// color: #fceccc;
						text-align: center;
						line-height: 60rpx;
						font-size: 14px;

						&.active {

							background-color: #fe865d;
							color: #fceccc;
							// border: 1px solid #fe865d;
							transition: all .3s;

						}
					}

				}
			}
		}

		.content-banner {
			width: 100%;
			// height: 2000rpx;
			// background-color: #faf7f5;
			background-color: #fceccc;
			color: #3b3b3b;
			margin-top: 80rpx;

			ul {
				margin: 0;
				padding: 0;
				width: 100%;

				li {
					width: 100%;
					// box-sizing: border-box;
					padding: 0 15px;
					height: 46px;
					line-height: 46px;
					border-bottom: 1px dotted #998D80;
					font-size: 14px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					&:nth-child(n+2) {
						padding-left: 60rpx;
					}
				}
			}
		}
	}
</style>